<template>
  <div id="pkQuestionView">
    <div
        style="height: 38px; width: 100%; background: green; display: flex; align-items: center; justify-content: center; padding: 5px 0;">
      <a-space>
        <a-avatar>
          <img alt="avatar" :src="myself.avatar"/>
        </a-avatar>
        <a-countdown
            :value="now + 1000 * 60 * 60"
            :now="now"
            :value-style="{color: 'white', margin: '0 10px 0 10px'}"
        />
        <a-avatar>
          <img alt="avatar" :src="opponent.avatar"/>
        </a-avatar>
      </a-space>
      <div style="position: absolute; right: 15px;">
        <a-dropdown @select="handleSelect">
          <icon-settings style="font-size: 30px; color: white; cursor: pointer;"/>
          <template #content>
            <a-doption @click="defeat">投降</a-doption>
            <a-doption @click="out">退出</a-doption>
          </template>
        </a-dropdown>

      </div>
    </div>
    <DoQuestion :accepted="win" :questionId="problemId" :style="{height: 'calc(100vh - 48px)'}" :mode="ProblemShowModeEnum.PK"/>
  </div>
</template>

<script lang="ts" setup>
import DoQuestion from "../../components/problem/DoQuestion.vue";
import {ProblemShowModeEnum} from "/src/common/enums/problem"
import {useStore} from "vuex";

const store = useStore();
const problemId = store.getters["pk/problemId"]
const myself = store.getters["pk/myself"]
const opponent = store.getters["pk/opponent"]
const ws = store.getters["pk/websocket"];
const now = Date.now()

const defeat = () => {
  let msg = {
    event: "defeat",
  }
  ws.send(JSON.stringify(msg))
}
const win = () => {
  let msg = {
    event: "end",
  }
  ws.send(JSON.stringify(msg))
}
const out = () => {

}
</script>

<style scoped></style>
